{extend name='table'}

{block name="style"}
<style>
    .layui-tab-content {
        display: flex;
    }
    .panel_left {
        width: 180px;
        flex-shrink: 0;
        margin-right: 20px;
    }
    .panel_right {
        width: calc(100% - 200px);
    }
    .tips {
        line-height: 24px;
        padding: 10px;
        font-size: 14px;
    }
    .auth_title {
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #EEE;
        font-weight: bold;
    }
    .operator_btn span {
        color: #008aff;
        margin-right: 10px;
        cursor: pointer;
    }
    .auth_item img {
        height: 24px;
        width: auto;
        margin-left: 20px;
    }
    .auth_block {
        cursor: pointer;
    }
    .auth_block.active {
        background-color: #e0f1ff;
        border-right: 5px solid #008aff;
    }
    .auth_item {
        margin: 0 20px;
        padding: 10px 0;
        border-left: 1px dotted #9dbdd6;
        position: relative;
    }
    .auth_item:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 14px;
        top: 22px;
        border-top: 1px dotted #9dbdd6;
    }
    .search-item {
        display: flex;
        padding: 5px 0;
    }
    .search-value span {
        cursor: pointer;
        font-size: 14px;
        color: #333;
        line-height: 26px;
        border-radius: 3px;
        display: inline-block;
        padding: 0 5px;
        margin-right: 5px;
    }
    .search-value span.active {
        background-color: #1E9FFF;
        color: #FFFFFF;
    }
    .search-value input {
        height: 30px;
    }
</style>
{/block}


{block name="content"}


<div class="layui-tab layui-tab-card">

    <div class="layui-tab-content layui-form" lay-filter="search_filter">

        <div class="panel_left">
            <div class="layui-panel">
                <div class="auth_title">{:lang('我的授权')}</div>
                <div class="auth_list">
                    {foreach $platform_list as $key => $item}
                    <div class="auth_block {if $item.id == $platform_id}active{/if}">
                        <div class="auth_item">
                            <span data-id="{$item.id}" data-url="admin.html#{:sysuri()}?platform_id={$item.id}">
                                <img src="{$item.logo}" alt="">
                            </span>
                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="panel_right">
            <div class="layui-panel">
                <div class="tips">
                    <div class="search-item">
                        <div class="search-name">{:lang('授权状态')}：</div>
                        <div class="search-value">
                            <span class="search_row active" data-value="">{:lang('全部')}</span>
                            {foreach $status_list as $key => $item}
                            <span class="search_row" data-value="{$key}">{$item}</span>
                            {/foreach}
                        </div>
                        <input type="hidden" id="status" name="status" value="">
                    </div>
                    <div class="search-item">
                        <div style="display: flex;margin-right: 20px;">
                            <div class="search-name" style="line-height: 30px;">{:lang('添加时间')}：</div>
                            <div class="search-value" style="width: 200px;">
                                <input data-date-range name="create_at" value="" placeholder="{:lang('请选择时间')}" class="layui-input">
                            </div>
                        </div>
                        <div style="display: flex;">
                            <div class="search-name" style="line-height: 30px;">{:lang('店铺名称')}：</div>
                            <div class="search-value" style="width: 200px;">
                                <input class="layui-input" name="shop_name" type="text">
                            </div>
                        </div>
                        <button class="layui-btn layui-btn-sm" type="button" id="search_btn" style="margin-left: 10px;background-color: #1E9FFF;border: #1E9FFF">{:lang('搜索')}</button>
                    </div>
                </div>
                <input type="hidden" name="platform_id" id="platform_id" value="{$platform_id}">
                <table id="shop_list" lay-filter="shop_list" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
            </div>
        </div>

    </div>
</div>
{if $platform_info.code == 'ozon'}
{include file='shop/ozon'}
{/if}
{/block}

{block name="script"}
<script>
    $(function() {
        let platform_id = null;
        // 搜索
        $('#search_btn').on('click', function() {
            let data = layui.form.val('search_filter')
            data.output = 'layui.table';
            layui.table.reload('shop_list', {
                where: data
            })
        })

        // 状态筛选
        $('.search_row').on('click', function() {
            $(this).addClass('active').siblings().removeClass('active');
            $('#status').val($(this).attr('data-value'));
            let data = layui.form.val('search_filter');
            data.output = 'layui.table';
            layui.table.reload('shop_list', {
                where: data
            })
        });

        // 切换平台
        $('.auth_block').on('click', function() {
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
            let url = $(this).find('span').attr('data-url');
            let id = $(this).find('span').attr('data-id');
            if(id == platform_id) {
                return false;
            }
            platform_id = $(this).find('span').attr('data-id');
            window.location.href = window.location.origin + '/' + url;
        })
    })
</script>
{/block}

